<template>
    <el-form
        :inline="true"
        :model="questionaire_query"
        class="demo-form-inline"
    >
        <el-form-item label="课程ID">
            <el-input
                v-model="questionaire_query.id"
                placeholder="请输入课程ID"
                clearable
            />
        </el-form-item>
        <el-form-item>
            <el-button
                type="primary"
                @click="onQuery"
            >查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button
                type="primary"
                @click="onReload"
            >重置</el-button>
        </el-form-item>
    </el-form>

    <!-- 评分展示 -->
    <div
        v-show="isVisible"
        style="display: flex; justify-content: center; gap: 200px;"
    >

        <div class="demo-progress">
            <span>课程评分</span>
            <el-rate
                v-model="result.lectureScore"
                disabled
                show-score
                text-color="#ff9900"
                :score-template="lectureScoreTemplate"
            />
            <div
                v-for="(value, key) in result.lecturePercentages"
                :key="key"
                style="display: flex; align-items: center;"
            >
                <span>评分{{ key }}：</span>
                <el-progress :percentage="value" />
            </div>
        </div>


        <div class="demo-progress">
            <span>讲师评分</span>
            <el-rate
                v-model="result.teacherScore"
                disabled
                show-score
                text-color="#ff9900"
                :score-template="teacherScoreTemplate"
            />
            <div
                v-for="(value, key) in result.teacherPercentages"
                :key="key"
                style="display: flex; align-items: center;"
            >
                <span>评分{{ key }}：</span>
                <el-progress :percentage="value" />
            </div>
        </div>
    </div>

    <div v-show="isVisible">
        <el-divider content-position="left">调查表详情</el-divider>
        <el-table
            :data="dataList.comList"
            style="width: 100%"
        >
            <el-table-column
                label="ID"
                prop="id"
            />
            <el-table-column
                label="课程ID"
                prop="lectureId"
            />
            <el-table-column
                label="课程评分"
                prop="lectureScore"
            />
            <el-table-column
                label="讲师评分"
                prop="teacherScore"
            />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button
                        size="small"
                        @click="handleDetail(scope.$index, scope.row)"
                    >详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="currentChange"
            @size-change="currentChange"
            background
            layout="prev, pager, next"
            :total="data.selectData.count"
            :default-page-size="data.selectData.pagesize"
        />
    </div>


    <el-dialog
        v-model="dialogDetailVisible"
        title="调查信息详情"
        align-center
    >
        <el-descriptions :column="1">
            <el-descriptions-item label="课程ID">
                {{ curRow?.lectureId }}
            </el-descriptions-item>

            <el-descriptions-item label="课程评分">
                {{ curRow?.lectureScore }}
            </el-descriptions-item>

            <el-descriptions-item label="讲师评分">
                {{ curRow?.teacherScore }}
            </el-descriptions-item>

            <el-descriptions-item label="评价内容">
                {{ curRow?.evaluateContent }}
            </el-descriptions-item>

        </el-descriptions>
    </el-dialog>
</template>

<script lang="ts">
import {
    inject, reactive, computed, ref
} from "vue";
import { questionaire_query, QuestionaireData, QuestionaireListData, result } from "@/utils/onsite_QuestionaireValidators"
export default {
    setup() {
        const dialogDetailVisible = ref(false);
        const axios = inject('axios');
        const data = reactive(new QuestionaireListData());
        const curRow = ref<QuestionaireData>();
        const isVisible = ref(false);

        const dataList = reactive({
            comList: computed(() => {
                return data.QuestionaireList.slice(
                    (data.selectData.page - 1) * data.selectData.pagesize,
                    data.selectData.page * data.selectData.pagesize
                );
            }),
        });

        const currentChange = (page: number) => {
            data.selectData.page = page;
        };
        const sizeChange = (pagesize: number) => {
            data.selectData.pagesize = pagesize;
        };

        const handleDetail = (index: number, row: QuestionaireData) => {
            console.log(index, row);
            dialogDetailVisible.value = true;
            curRow.value = row;
        }

        const onQuery = () => {
            const { id } = questionaire_query;
            console.log(id);
            if (id != "") {
                if (/^[0-9]*$/.test(id)) {
                    //@ts-ignore
                    axios.get("/api/questionnaire/queryList",
                        {
                            params: {
                                id: id,
                            }
                            //@ts-ignore
                        }).then((res) => {
                            if (res.status === 200) {
                                data.QuestionaireList = res.data.data;
                                data.selectData.count = res.data.data.length;
                            } else {
                                alert("未请求到\"调查表\"信息");
                            }
                        });

                    //@ts-ignore
                    axios.get("/api/questionnaire/result",
                        {
                            params: {
                                lectureId: id,
                            }
                            //@ts-ignore
                        }).then((res) => {
                            if (res.status === 200) {
                                result.value = res.data.data;
                                for (let key in result.value.lecturePercentages) {
                                    //@ts-ignore
                                    result.value.lecturePercentages[key] = Number(result.value.lecturePercentages[key].toFixed(2));
                                }

                                for (let key in result.value.teacherPercentages) {
                                    //@ts-ignore
                                    result.value.teacherPercentages[key] = Number(result.value.teacherPercentages[key].toFixed(2));
                                }

                            } else {
                                alert("未请求到\"调查表统计\"信息");
                            }
                        });

                    isVisible.value = true;
                } else {
                    alert("ID必须为数字!");
                }
            }
        };

        const onReload = () => {
            location.reload();
        }

        const lectureScoreTemplate = computed(() => `${result.value.lectureScore.toFixed(2)} points`);
        const teacherScoreTemplate = computed(() => `${result.value.teacherScore.toFixed(2)} points`);


        return {
            dialogDetailVisible, data, dataList, currentChange, sizeChange, handleDetail, onQuery, onReload, 
            result, questionaire_query, isVisible, curRow, lectureScoreTemplate, teacherScoreTemplate,
        }
    }
}
</script>

<style scoped>
.demo-progress .el-progress--line {
    margin-bottom: 15px;
    width: 350px;
}
</style>